

<template>
  <div class="mydiv">
    <button @click="getUserInfo"
            style="color: black;height: 50px;background-color: #876315">登录，getUserInfo1</button>
<!--    <button @click="appLogout"-->
<!--            style="color: black;height: 50px;background-color: #876315">退出app</button>-->
    <div>
      消息：
      <br/>
      {{msg}}
    </div>


  </div>
</template>
<script setup>
 import {ref} from "vue";

 const msg=ref("");

 //登录（app登录+商城登录）
 const getUserInfo = async () => {
   console.log("window.xcapp=",window.xcapp)
   const userInfo = await window.xcapp.callHandler("getUserInfo");
   msg.value="getUserInfo 主动登录:"+JSON.stringify(userInfo);
 }




 //app我的退出
window.xcLogout= function (data) {
  msg.value="通知退出:"+data;
};

 window.xcLogin= function (data) {
   msg.value="通知登录："+data;
 };
//隐藏退出登录
 function appLogout() {
   window.xcapp.callHandler("appLogout");
 }
localStorage.removeItem("xcapp_userInfo");
</script>
<style scoped lang="less">
/* 确保 <body> 和 <html> 高度占满全屏 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 让父容器使用 Flex 布局，并居中子元素 */
body {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  background-color: #f0f0f0; /* 可选：背景色便于观察 */
}

/* 你的 div 样式 */
.mydiv {
  background-color: #007bff;
  color: white;
  padding: 20px 40px;
  border-radius: 8px;
  font-size: 18px;
  text-align: center;
}
</style>